
<template>
	<view class="s-back recharge">
        <view class="flex" :style="{
			paddingTop:statusbarHeight + 12 +'px'
		}">
			<view class="text1">
				<uni-icons type="back" size="25" @click="goBack" color="#fff"></uni-icons>
			
			</view>
			<view class="flex1">充值对话次数</view>
			<view class="right" style="visibility: hidden;">恢复订阅</view>		
        </view>

		<view class="recharge-back">
			<text class="recharge-text1">对话余额<text class="recharge-text2">{{ num }}</text>{{ unit }}</text>

		</view>
		

		
		

		<view class="block1">
			<view class="recharge-title">
				<text class="text-1">充值对话次数<text class="text-2">永不过期，文字类对话可用</text></text>
			</view>
			<view :style="{
				marginBottom:'14px',
				marginLeft:idx%2==0?'14px':'',
				marginRight:idx%2==0?'14px':''
			}" class="blo7" @tap="choosePrice(idx)" v-for="(item,idx) in priceList" :key="idx">
				<view :class="activeIdx==idx?'boxx1':'boxx1 boxx2'">
					<view class="name1">{{ item.title||'默认' }}</view>
					<view class="price1">{{ item.price }}</view>
					<view class="orginal1">{{ item.old_price }}</view>
					<view class="per1">{{ item.number+unit }}</view>
				</view>
				
				
			</view>


		

		</view>

		<!-- <view class="block2">
			<view class="first">
				<view class="bar"></view>
				<text class="title">用户评价</text>
			</view>
			<view class="item2" v-for="(item,idx) in commentList" :key="idx">
				<view class="line1">
					<u-avatar :src="item.avatar" size="60"></u-avatar>
					<text class="name1">{{ item.name[0]+'**'+item.name[item.name.length-1] }}</text>
					<view class="tit1">
						<uni-icons color="#F6D98F" type="vip" size="26"></uni-icons>
						<text class="title1">{{ item.title }}</text>
					</view>
				</view>
				<view class="content1">
					{{ item.content }}
				</view>
			</view>
		</view> -->
	
		
		<view class="bgap"></view>
		<view class="bottom">
			<view class="btn" @tap="choosePayMethod">立即充值</view>
		</view>


		<u-popup mode="center" border-radius="40" v-model="isShowPop">
        <view class="pop1">
           <view class="hu1">
			
		   </view>
		   <view class="posi1">
<view class="line7">是否要放弃充值</view>
<view class="line8" v-if=" priceList.length>0">
	优惠力度低至{{ priceList[0].number+unit }}{{ priceList[0].price }}元
</view>
<!-- <view class="line8">倒计时{{msg}}</view> -->
			
		</view>
		   <view class="mt50 line9">
			<view class="btn8" @tap="jumpBack1">
				狠心放弃
			</view>
			<view class="btn9" @tap="pay">
				继续支付
			</view>
		   </view>
        </view>
    </u-popup>

	<u-popup mode="center" border-radius="0" v-model="isShowPop1" :mask-close-able="false">
			<u-image :src="src" width='500' height="500"></u-image>
    </u-popup>

	<u-popup mode="bottom" border-radius="60" v-model="isShowModel">
			<view class="edit11">
				<view class="center">
					选择支付方式
				</view>

			<radio-group style="margin-bottom:90px;" @change="radioChange">
				<label class="line1" v-for="(item, index) in payList" :key="item.value">
					<view>
						<radio color="rgb(128, 229, 139)" :value="item.val" :checked="index == temp" />
					</view>
					<view style="margin-left:10px;color: #fff;font-size: 16px;">{{item.name}}</view>
				</label>
			</radio-group>
			

				<view class="center">
					<view class="bottom">
					<view class="btn8" @tap="isShowModel=false">取消</view>
					<view class="btn9" @tap="save1">支付</view>
				</view>
				</view>
				
			</view>
    </u-popup>
	</view>
</template>

<script>
import { getAliPayConfig } from '@/utils/storage'
import { isMobile } from '@/utils';
import payMethod from '@/utils/pay'
	export default {
		name:"subscribe",
    components:{},
		data() {
			return {
				isShowModel:false,
				src:'',
				timer2:null,
				isShowPop:false,
				
				activeIdx:0,
				priceList:[],
				payList:[
					{
						id:1,
						val:'wx',
						name:'微信支付'
					},
					{
						id:2,
						val:'zfb',
						name:'支付宝支付'
					},
				],
				
				
				
				orderId:'',
				num:0,
				statusbarHeight:0,
				unit:''
            }
		},
		onLoad(opts) {
			// if(opts.num){
				this.num = uni.getStorageSync('residue_degree')
			// }
			this.statusbarHeight = uni.getStorageSync('statusBarHeight')

			this.unit = uni.getStorageSync('unit')
		},
		mounted() {
			
			this.getData()
		},
		beforeDestroy(){
			clearInterval(this.timer2)
			this.timer2 = null
		},
		destroyed() {
			
		},
		
		computed:{
			
		},
		methods: {
			radioChange(e){
				this.temp = e.detail.value
				
				
			},
			async save1(){
				this.payVal = this.temp
				
				this.isShowModel = false
				this.pay(this.payVal)
			},
			jumpBack1(){
				uni.navigateBack({
					 delta: 1
				});
			},
			jumpBack(){
				this.isShowPop = true
			},
			async choosePayMethod(){
				if(isMobile()||uni.getStorageSync('isMiniprogram')=='1'){
					this.pay('wx')
				}else{
					if(getAliPayConfig()){
						this.isShowModel = true
					}else{
						this.pay('wx')
					}
					
					// zfb
				}
			},
			async pay(type){
				
				var r = await payMethod.pay(this,{
					api:'marketOrderCreate',
					data:{
						setmeal_type:'recharge',
						setmeal_id:this.priceList[this.activeIdx].id,
						buy_number:1,
						pay_type:type
					}
				})
				
				if(r.isTimer){

					if(r.showPic){
						this.src = r.code_url
						this.isShowPop1 = true
					}
					// timer
					this.timer2 = setInterval(()=>{
						this.getResult()
					},2000)
				}else{
					this.getResult()
				}
			},
			async getResult(){
				const r = await this.$u.api.marketOrderResult({
					order_id:this.orderId
				})
				if(r){
					this.$u.toast('支付成功');
					uni.$emit('updateDataMy')
					uni.switchTab({
						url:'/pages/my/my'
					})
				}else{
					this.$u.toast('支付失败');
				}
			},
			showPop(){
				this.isShowPop = true
			},
			async getData(){
				const r = await this.$u.api.marketRechargeList()
				if(r){
					this.priceList = r.data
					
					// this.priceList.forEach(item=>{
					// 	let type = parseInt(item.duration_type)
					// 	switch(type){
					// 		case 1:
					// 			item.perPrice = item.price
					// 			break
					// 		case 3:
					// 			item.perPrice = (parseFloat(item.price)/30).toFixed(2)
					// 			break
					// 		case 5:
					// 			console.log(item.price,(parseFloat(item.price/365)),'ssss')
					// 			item.perPrice = (parseFloat(item.price/365)).toFixed(2)
					// 			break
							
							
					// 	}
						
						
					// })
					// this.priceList = [...this.priceList,...this.priceList,...this.priceList,...this.priceList,...this.priceList]
				}

			},
			choosePrice(idx){
				this.activeIdx = idx
			},
		countDown() {
			var maxtime = 10 * 60 * 60; // 
			this.timer1 = setInterval(()=>{
						if (maxtime >= 0) {
				let minutes = Math.floor(maxtime / 60 / 60);
				let seconds =  Math.floor((maxtime - (minutes*60*60)) / 60)
				let millSeconds = (maxtime - (minutes*60*60)) % 60
				
				if(minutes.toString().length<2) minutes = '0'+minutes
				if(seconds.toString().length<2) seconds = '0'+seconds
				if(millSeconds.toString().length<2) millSeconds = '0'+millSeconds
				this.msg = minutes + ":" + seconds + ":" + millSeconds;
				
			
					--maxtime;
				} else{
				clearInterval(this.timer1);
				
				}
			}, 1000/60);   
       
      },
     
			goBack(){
				console.log('ssss')
				this.isShowPop = true
				
			},
			scroll(){
				let scrollWidth = document.getElementById('scroll').scrollWidth
       
				this.timer = setInterval(()=>{
					if(scrollWidth>document.getElementById('scroll').scrollLeft + 400){
					
						document.getElementById('scroll').scrollLeft +=1
					}else{
						document.getElementById('scroll').scrollLeft = 0
					}
					
					
				},50)
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.recharge{
	.recharge-title{
		padding: 22px 14px;
		color: #fff;
		
		
		.text-1{
			font-size: 20px;
		}
		.text-2{
			margin-left: 10px;
			font-size: 14px;
			color: #bebebe;
		}
	}
	.recharge-text1{
		color: #fff;
		
		font-size: 18px;
	}
	.recharge-text2{
		color:rgb(247, 119, 119);
		font-size: 24px;
		margin:0 4px;
	}
	.recharge-back{
		display: flex;
		justify-content: center;
		padding-top: 30px;
		width: 100%;
		height: 140px;
		background: #75CCD1;
	}
	.flex{
		padding:24rpx;
		display: flex;
		color: #fff;
	}
	.text1{
		width: 130rpx;
	}
	.flex1{
		display: flex;
		justify-content: center;
		flex: 1;
		font-size: 36rpx;
	}
	.right{
		color: #828694;
		font-size: 32rpx;
	}
	.blo2{
		display: flex;
		justify-content: center;
		padding: 20rpx;
		color:#828694;
	}
	.blo3{
		margin:0 20rpx;
		font-size: 24rpx;
		color:#828694;
	}
	.blo4{
		display: inline-flex;
		align-items: center;
		background: #2A2C3A;
		padding: 10rpx;
		border-radius: 60rpx;
		margin-left: 30rpx;
	}
	.block1{
		white-space: wrap;
		overflow-x: auto;
		border-radius: 20px;
	
		background: #272734;
		margin: -40px 14px 0;
	}
	.blo5{
		padding: 40rpx;
	}
	.lin1{
		color: #C4BBA6;
		font-size: 40rpx;
		font-weight: 800;
		margin:40rpx 0 16rpx;
	}
	.lin2{
		color: #C4BBA6;
		font-size: 30rpx;

	}
	.item1{
		margin-bottom: 30rpx;
	}
	.blo6{
		background: #2A2C3A;
		margin:0rpx 24rpx 24rpx;
		border-radius: 20rpx;
		padding: 30rpx 24rpx 10rpx;
	}
	.text1{
		font-size: 36rpx;
		color:#fff;
		margin-bottom: 30rpx;
		white-space: nowrap;
	}
	.text2{
		font-size: 28rpx;
		color:#828694;
	}
	.blo7{
		padding: 0rpx 0 20rpx;
		position: relative;
		display: inline-flex;
		margin-right: 30rpx;
	}
	.boxx1{
		display: inline-flex;
		background-image: linear-gradient(#F2DF90, #ECC291);
		width: calc((100vw - 72px)/2);
		border-radius: 30rpx;
		padding: 30rpx 0rpx;
		color: #000;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.name1{
			font-size: 36rpx;
			font-weight: 500;
		}
		.price1{
			margin:0 20rpx;
			font-size: 60rpx;
			color: #D4372E;
		}
		.orginal1{
			text-decoration:line-through;
			color: #937353;
			font-size: 30rpx;
			margin: 10rpx 0;
		}
		.per1{
			color: #D4372E;
			font-size: 28rpx;
		}
	}
	.boxx2{
		width: calc((100vw - 72px)/2);
		display: inline-flex;
		background: #1E2037 !important;
		border: 1px solid #292E49 !important;
		padding: 30rpx 0rpx;
		border-radius: 30rpx;
		color: #fff;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.name1{
			font-size: 36rpx;
			font-weight: 500;
		}
		.price1{
			margin:0 20rpx;
			font-size: 60rpx;
			color: #EAC78F;
		}
		.orginal1{
			text-decoration:line-through;
			color: #9396A0;
			font-size: 30rpx;
			margin: 10rpx 0;
		}
		.per1{
			color: #9396A0;
			font-size: 28rpx;
		}
	}
	.top1{
		position: absolute;
		background:#E74F3A ;
		color: #fff;
		top: 0;
		left: 20rpx;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.name1{
			font-style: italic;
			font-weight: 600;
		}
		.time1{
			font-size: 34rpx;
		}
		
	}
	.bgap{
		width: 100%;
		height: 220rpx;
	}
	.bottom{
		background: #151828;
		bottom: 0;
		position: fixed;
		width: 100%;
		
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		padding: 24rpx;
		padding-bottom: 50rpx;
		.btn{
			border-radius: 50rpx;
			background-image: linear-gradient(to top, #7CD887,#75CCD1);
			padding:30rpx;
			color:#000;
			font-size: 40rpx;
			font-weight: 500;
			text-align: center;
			
		}
		
	}
	.block2{
		padding: 30rpx 24rpx;
		.first{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: row;
		}
		.bar{
			width: 8rpx;
			height: 50rpx;
			background-image: linear-gradient(to top, #83D2EA,#79CDED);
			border-radius: 4rpx;
		}
		.title{
			font-size: 40rpx;
			color: #fff;
			margin-left: 30rpx;
		}
		.item2{
			padding: 30rpx 30rpx 0;
		}
		.line1{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 16rpx 0;
			border-bottom: 1px solid #272734;
			color: #fff;
			.name1{
				font-size: 34rpx;
				margin:0 20rpx;

			}
			.tit1{
				padding: 8rpx 20rpx;
				background: #0F0D0D;
				border-radius: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.title1{
					font-size: 30rpx;
					color: #F6D98F;
			}	
			}
			

		}
		.content1{
			padding: 20rpx 0;
			color: #A6A7B9;
			font-size: 30rpx;
			line-height: 50rpx;
			white-space: pre-wrap;
		}
	}
	.pop1{
		width: 600rpx;
		border: 1px solid #39353C;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background-image: linear-gradient(to right, #F4D4AF,#F4E9D5);
		
		.hu1{
			position:absolute;
			background: #2F313F;
			left: -20%;
			width: 140%;
			height: 600rpx;
			top: -300rpx;
			border-radius: 50%;
		}
		.posi1{
			
			top:0;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			
			.line7{
				font-size: 30rpx;
				display: inline-flex;
				padding: 14rpx 28rpx;
				color: #CC997F;
			background: #18181F;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			margin-bottom: 50rpx;
			}
			.line8{
				font-size: 40rpx;
				color: #F9EFAF;
				margin:4rpx 0;
				text-align: center;
			}
		}
		.mt50{
			margin-top: 260rpx;
			height: 300rpx;
		}
		.line9{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			padding: 20rpx 0;
			color: #fff;
			font-size: 34rpx;
			.btn8{
				
				background: #EDC596;
				border-radius: 80rpx;
				border:1px solid #fff;
				padding: 20rpx 40rpx;
				margin-right: 30rpx;
			}
			.btn9{
				background-image: linear-gradient(to bottom, #E7B266,#ff8432);
		
				border-radius: 80rpx;
				border:1px solid #fff;
				padding: 20rpx 40rpx;
			}
		}
	}
	
}
@media screen and (min-width: 700px) {
	.btn{
		width: 660px;
	}
	.boxx1{
		width: 200px !important;
	}
	
}
.edit11{
		background:rgba(#151520, 0.9);
		padding: 20px;
		
		.center{
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
		font-size: 20px;
		}
		.cell{
			padding:10px 0;
			font-size: 16px;
			display: flex;
			border-bottom: 1px solid #1f1f2f;
			.left{
				display: inline-block;
				width: 70px;
				
				text-align: right;
				color: #a4a4a4;

			}
			.right{
				margin-left: 4px;
				color:#fff;
			}

		}
		.bottom{
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			width: 300px;
			.btn8{
				width: 130px;
				height: 36px;
				// background: #EDC596;
				border-radius: 80rpx;
				border:1px solid #7CD887;
				display: flex;
				justify-content: center;
				align-items: center;
			
				margin-right: 30rpx;
			}
			.btn9{
				width: 130px;
				height: 36px;
				// background-image: linear-gradient(to bottom, #E7B266,#ff8432);
				background-image: linear-gradient(to top, #7CD887,#75CCD1);
		
		
				border-radius: 80rpx;
				// border:1px solid #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
	}
	.line1{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 20px 0;
	}
</style>
